Media queries with effector

February 24, 2019 · 4 min read

Zero Bias

Effector Core Team

Hi!

In this article I will show how to make react component which will work like this

const Button = () => (
  <>
    <Screen landscape large>
      [large wide button]
    </Screen>
    <Screen portrait small medium>
      [compact button]
    </Screen>
  </>
)

Media queries itself could been handled in such way:

const mediaQueryList = window.matchMedia('(orientation: portrait)')
mediaQueryList.addListener(e => {
  if (e.matches) {
    // The viewport is currently in portrait orientation
  } else {
    // The viewport is currently in landscape orientation
  }
})

But how this could been used in react components? (actually, we’ll make more universal thing, which can be used in various ways)

Effector can reacts on media queries changes and provide current query state as store

import {createEvent, createStore} from 'effector'

const orientationChange = createEvent('orientation changed')
const isPortrait = createStore(false).on(
  orientationChange,
  (state, e) => e.matches,
)

const orientationMediaQuery = window.matchMedia('(orientation: portrait)')
orientationMediaQuery.addListener(orientationChange)

orientationChange is just a function

We can rewrite it for reuse with any query

import {createEvent, createStore} from 'effector'

export function mediaMatcher(query) {
  const queryChange = createEvent('query change')
  const mediaQueryList = window.matchMedia(query)
  mediaQueryList.addListener(queryChange)
  const isQueryMatches = createStore(mediaQueryList.matches).on(
    queryChange,
    (state, e) => e.matches,
  )
  return isQueryMatches
}

/* declaring queries */

const small = mediaMatcher('(max-width: 768px)')
const medium = mediaMatcher('(min-width: 769px) and (max-width: 1024px)')
const large = mediaMatcher('(min-width: 1025px)')
const portrait = mediaMatcher('(orientation: portrait)')

/* using queries */

small.watch(isSmall => {
  console.log('is small screen?', isSmall)
})

For my device currently it prints is small screen? false

Lets make it single store, thereby creating common base to connect it to view framework further

//mediaMatcher.js
import {createEvent, createStore} from 'effector'

export function mediaMatcher(query) {
  const queryChange = createEvent()
  const mediaQueryList = window.matchMedia(query)
  mediaQueryList.addListener(queryChange)
  const isQueryMatches = createStore(mediaQueryList.matches).on(
    queryChange,
    (state, e) => e.matches,
  )
  return isQueryMatches
}

import {combine} from 'effector'
import {mediaMatcher} from './mediaMatcher'

/* declaring queries and merge them into single store*/

export const screenQueries = combine({
  small: mediaMatcher('(max-width: 768px)'),
  medium: mediaMatcher('(min-width: 769px) and (max-width: 1024px)'),
  large: mediaMatcher('(min-width: 1025px)'),
  portrait: mediaMatcher('(orientation: portrait)'),
})

/* using queries */

screenQueries.watch(queries => {
  const {small, medium, large, portrait} = queries
  console.log(`
    is small ${small}
    is medium ${medium}
    is large ${large}
    is portrait ${portrait}
    is landscape ${!portrait}
  `)
})

Now we could connect it to view framework, react, using effector-react library

//mediaMatcher.js
import {createEvent, createStore} from 'effector'

export function mediaMatcher(query) {
  const queryChange = createEvent()
  const mediaQueryList = window.matchMedia(query)
  mediaQueryList.addListener(queryChange)
  const isQueryMatches = createStore(mediaQueryList.matches).on(
    queryChange,
    (state, e) => e.matches,
  )
  return isQueryMatches
}

//screenQueries.js
import {combine} from 'effector'
import {mediaMatcher} from './mediaMatcher'

/* declaring queries and merge them into single store*/

export const screenQueries = combine({
  small: mediaMatcher('(max-width: 768px)'),
  medium: mediaMatcher('(min-width: 769px) and (max-width: 1024px)'),
  large: mediaMatcher('(min-width: 1025px)'),
  portrait: mediaMatcher('(orientation: portrait)'),
})

import {useStore} from 'effector-react'
import {screenQueries} from './screenQueries'

function orientationCheck(props, queries) {
  //if there no constraint on orientation
  if (!props.portrait && !props.landscape) return true
  return (
    (props.portrait && queries.portrait) ||
    (props.landscape && !queries.portrait)
  )
}

function screenSizeCheck(props, queries) {
  //if there no constraint on screen size
  if (!props.small && !props.medium && !props.large) return true
  return (
    (props.small && queries.small) ||
    (props.medium && queries.medium) ||
    (props.large && queries.large)
  )
}

export const Screen = props => {
  const queries = useStore(screenQueries)
  const orientationAllowed = orientationCheck(props, queries)
  const screenSizeAllowed = screenSizeCheck(props, queries)
  if (orientationAllowed && screenSizeAllowed) {
    return props.children
  }
  return null
}

Screen.defaultProps = {
  children: null,
  small: false,
  medium: false,
  large: false,
  portrait: false,
  landscape: false,
}

Done!

It support nesting out from a box

export const AppLogo = ({brandName, fullLogo, squareLogo}) => (
  <>
    <Screen landscape>
      <img src={fullLogo} />
      <Screen large>{brandName}</Screen>
    </Screen>
    <Screen portrait>
      <img src={squareLogo} />
    </Screen>
  </>
)